<template>
  <div class="wrap">
    <el-input ref="search" placeholder="请输入管理员姓名" v-model="name" :disabled="false"></el-input>
    <el-button type="primary" @click="searchAdmin()" plain>搜索</el-button>
    <el-button type="primary" plain @click="clearSearch()">重置</el-button>
    <el-button type="success" plain @click="centerDialogVisible = true">添加管理员</el-button>
    <div class="alert">

      <!-- 添加管理员 -->

      <el-dialog title="添加管理员" :visible.sync="centerDialogVisible" width="30%" center>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="account">
            <el-input v-model.number="ruleForm.account" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="passwd">
            <el-input v-model="ruleForm.passwd" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="powId">
            <el-select v-model="ruleForm.powId" placeholder="请选择类型">
              <el-option v-for="item in options" :key="item.express" :value="item" :label="item.title">

              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm'),addAdmin()">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改管理员 -->

      <el-dialog title="修改管理员" :visible.sync="centerDialogVisible2" width="30%" center>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="编号" prop="id">
            <el-input disabled v-model="ruleForm.id"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="account">
            <el-input disabled v-model="ruleForm.account" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="passwd">
            <el-input v-model="ruleForm.passwd" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="powId">
            <el-select v-model="ruleForm.powId" placeholder="请选择类型">
              <el-option v-for="item in options" :key="item.express" :value="item" :label="item.title">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm'),editAdmin()">确 定</el-button>
        </span>
      </el-dialog>

    </div>
    <div class="main">
      <template>
        <el-table v-loading="loading" :data="adminData" border style="width: 100%" current-change="handleCurrentChange">
          <el-table-column label="编号" type="index" width="100">
          </el-table-column>
          <el-table-column prop="admName" label="姓名">
          </el-table-column>
          <el-table-column prop="admUsername" label="账号">
          </el-table-column>
          <el-table-column prop="powId" label="类型">
            <template slot-scope="scope">
              {{scope.row.powId==2?'普通管理员':'超级管理员'}}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="320">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row),delAdmin(scope.$index, scope.row)" type="text" size="small">删除
              </el-button>
              <el-button @click="changeAdmin(scope.$index, scope.row)" type="text" size="small">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="block" id="block">
      <el-pagination @current-change="handleCurrentChange" @size-change="handlePageSize" background
        :current-page="currentPage" layout="prev, pager, next" :total="total" :page-size="pagesize">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    var checkNum = (rule, value, callback) => {
      if (!Number.isInteger(value)) {
        callback(new Error('请输入数字值'));
      } else {
        callback();
      }
    };
    var checkName = (rule, value, callback) => {
      if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
        callback(new Error('请输入中文'));
      } else {
        callback();
      }
    };
    return {
      name: '',
      centerDialogVisible: false,
      centerDialogVisible2: false,
      // 分页
      total: 20,
      currentPage: 1,
      pagesize: 5,
      page: 1,
      value: '',
      selectedOption: '',
      loading: true,
      options: [
        {
          title: '管理员',
          value: 0,
        },
        {
          title: '超级管理员',
          value: 1,
        }
      ],
      ruleForm: {
        id: '',
        name: '',
        account: '',
        passwd: '',
        powId: '',
      },
      rules: {
        name: [
          { validator: checkName, trigger: 'blur' },
          { min: 2, max: 6, message: '姓名必须在2-6位', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入管理员密码', trigger: 'blur' },
          { min: 6, max: 8, message: '长度必须在6-12位', trigger: 'blur' }
        ],
        passwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 12, message: '密码长度在5-12位', trigger: 'blur' }
        ],
        powId: [
          { required: true, message: '请选择管理员类型', trigger: 'change' }
        ],
      },
      adminData: [
        {
          id: '',
          admName: '',
          admUsername: '',
          admPassword: '',
          powId: ''
        }, {
          id: '',
          admName: '张三',
          admUsername: '111221',
          admPassword: '0',
          powId: '1'
        },
        {
          id: '',
          admName: '王五',
          admUsername: '133111',
          admPassword: '0',
          powId: '2'
        },
        {
          id: '',
          admName: '里斯',
          admUsername: '11411',
          admPassword: '0',
          powId: '1'
        }
      ],
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.$message.success('添加成功！');
          return this.centerDialogVisible = false
        } else {
          return false;
        }
      });
    },
    headerStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 15) {
        return 'table-th'
      } else if (columnIndex === 0 || columnIndex === 1) {
        return 'table-lt'
      } else {
        return 'table-rt'
      }
    },
    isCenter ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 15) {
        return 'text-align: center'
      } else if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
        return 'text-align: left'
      } else {
        return 'text-align: right'
      }
    },



    // 查询管理员
    checkAdmin () {
      this.$axios.get('/getAllManagerInfo', {
        params: {
          page: this.currentPage,
          rows: this.pagesize,
        },
      }).then(res => {
        console.log(res);
        this.adminData = res.data.data.managers
        if (res.data.code == 200) {
          this.loading = false
          // this.$message('查询成功')
        } else {
          this.$message('查询失败')

        }
      })
    },

    // 按姓名查询管理员
    searchAdmin () {
      var params = new URLSearchParams()
      params.append('name', this.name)
      this.$axios.post('/getManagerByName', params).then(res => {
        console.log(res);
        this.adminData = res.data.data.managerInfo
        if (res.data.code == 200) {
          this.$message.success('查询管理员成功')
        } else {
          this.$message.error('查询失败')
        }
      })
    },

    // 分页组件
    handleCurrentChange (val) {
      this.currentPage = val
      this.loading = true;
      // console.log('当前页:');
      // console.log(this.currentPage);
      // console.log(this.pagesize);
      this.checkAdmin()
    },
    handlePageSize (val) {
      this.currentPage = val
      // console.log('条数:');
    },


    // 重置按钮
    clearSearch (row, column) {
      this.$refs.search.value = ""
    },


    // 添加管理员
    addAdmin () {
      var params = new URLSearchParams();
      params.append('account', this.ruleForm.account)
      params.append('name', this.ruleForm.name)
      params.append('passwd', this.ruleForm.passwd)
      params.append('powId', this.ruleForm.powId.value)
      this.$axios.post('/addManager', params).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.$message.success('添加管理员成功！')
          this.centerDialogVisible = false
          this.checkAdmin()
        } else {
          this.$message.error('添加管理员失败！')
        }
      })
    },



    // 修改管理员
    changeAdmin (index, row) {
      this.centerDialogVisible2 = true;
      this.ruleForm.id = row.id;
      this.ruleForm.name = row.admName;
      this.ruleForm.account = row.admUsername;
      this.ruleForm.passwd = row.admPassword;
      this.ruleForm.powId = row.powId;
      console.log(index, row)
    },
    editAdmin () {
      var params = new URLSearchParams();
      params.append('id', this.ruleForm.id)
      params.append('name', this.ruleForm.name)
      params.append('passwd', this.ruleForm.passwd)
      params.append('powId', this.ruleForm.powId)
      this.$axios.post('/changeManaIfo', params).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.$message.success('修改管理员成功！')
          this.centerDialogVisible2 = false
          this.checkAdmin()
        } else {
          this.$message.error('修改管理员失败！')
        }
      })
    },


    // 删除管理员
    delAdmin (index, row) {
      var params = new URLSearchParams();
      params.append('id', row.id)
      this.$axios.post('/delManaIfo', params).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.$message.success('删除管理员成功！')
          this.checkAdmin()
        } else {
          this.$message.error('删除管理员失败！')
          console.log(row.id)
        }
      })
    },
    handleClick (row) {
      console.log(row);
    },
  },
  mounted () {
    this.checkAdmin();
  },
}
</script>
<style scoped>
.wrap {
  margin-top: 30px !important;
  border-top: 1px solid #fff;
}
.wrap .el-input {
  width: 400px;
}
::v-deep .el-input input {
  padding-left: 20px !important;
}
.wrap .el-button {
  width: 100px;
  height: 40px;
  line-height: 40px;
}
.main {
  margin-top: 30px !important;
}
.cell .el-tag {
  background: #fff;
  border: none;
  font-size: 14px;
}
::v-deep .el-table {
  margin-top: 50px !important;
}
::v-deep .el-table th {
  border-color: #bbb;
}
::v-deep .el-table tr th,
::v-deep .el-table tr td {
  text-align: center;
}
::v-deep .el-table tr th {
  height: 50px;
  background: #eee;
}

/* 添加管理员弹框样式 */

::v-deep .el-dialog {
  margin: auto auto !important;
  padding-left: 30px !important;
  width: 800px;
  height: 400px;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  overflow: hidden;
}
::v-deep .el-dialog:nth-child(1) {
  height: 560px;
}

::v-deep .el-dialog .el-dialog__header {
  margin-top: 30px !important;
}
::v-deep .el-dialog .el-form-item {
  margin-top: 30px !important;
}
::v-deep .el-dialog .el-dialog__footer {
  margin-top: 70px !important;
}
::v-deep .el-dialog .el-dialog__footer .el-button:nth-child(1) {
  margin-right: 100px !important;
}
::v-deep .el-dialog .el-form-item .el-form-item__content .el-form-item__error {
  margin-left: 100px !important;
  margin-top: 5px !important;
}
::v-deep .el-dialog .el-form-item .el-form-item__content .el-input {
  margin-left: 10px !important;
}
#block {
  margin-top: 30px !important;
  text-align: right;
}

#table th {
  max-width: 25%;
}
</style>
